<template>
  <div class="dw">
    <div class="dfl">
      <div>
        <div @click="djjj"  :style="{width:ifbj? '388px':'170px'}" class="inp" >
          评论
          </div>
      </div>
      <div v-show="!ifbj" class="iconfont" style="margin: 14px 20px 0 30px; color: #999">
        <van-icon v-show="!ifbj" :badge="dx.comment > 0 ? dx.comment : ''" name="comment" />
      </div>
      <div v-show="!ifbj"
        @click="scsj"
        class="iconfont"
        style="margin: 12px 20px 0 0; color: #999"
      >
        <van-icon name="star" :color="dx.is_fav ? 'red' : '#999'" />
      </div>
      <div v-show="!ifbj"
        @click="pldzqx"
        class="iconfont"
        style="margin: 12px 20px 0 0; color: #999"
      >
        <van-icon :color="dx.is_like ? 'red' : '#999'" name="good-job" />
      </div>
      <div v-show="!ifbj" class="iconfont" style="margin: 12px 20px 0 0; color: #999">
        <van-icon @click="showShare = true" name="share" />
      </div>
    </div>


<!-- 底部分享弹框 -->
<van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>



    <!-- 底部留言 -->
    <van-popup
  v-model="popxs"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
>

<!-- <van-field style="margin: 30px 0 0 0;"
  v-model="content"
  rows="1"
  autosize
  type="textarea"
  placeholder="请输入留言"
/> -->
<van-field style="margin: 30px 0 10px 0;"
  v-model.trim="content"
  rows="5"
  autosize
  type="textarea"
  :placeholder="placeholder"
  show-word-limit
  autofocus
/>
<van-button @click="fb" class="annu" style="width: 300px;" type="primary" block>发布</van-button>
</van-popup>
  </div>
</template>

<script>
import pldzqxsj from "@/views/wzwzwz/djpllist/plhr.js";
import QRCode from 'qrcode'
export default {
  props: {
    dx: {
      required: true,
    },
    user_id: {
      required: true,
    },
    article_id: {
      required: true,
    },
    placeholder:{
      default:'请输入留言',
      type:String
    },
    comment_type:{
      default:0,
      type:[String,Number]
    },
    reply_comment_id:{
      default:'',
      type:String
    },
    csy:{
      default:0,
      type:[Number]
    },
    ifbj:{
      default:false
    }
  },
  data() {
    return {
        popxs:false,
        content:'',
        // reply_comment_id:'',
        // comment_type:0         //这个数据是  0 就是回复文章     是   1  就是回复人 回复人写的评论
          showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
          { name: 'QQ', icon: 'qq' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        
      ],
    }
  },
  computed:{
    userInfo(){
        return this.$store.state.mkhuser.userInfo
    }
  },
  methods: {
    ...pldzqxsj,
    djjj(){
      this.popxs=true
      // this.$emit('djjj',2)
      let fuju=this.$parent
       fuju.comment_type=0
        fuju.reply_comment_id=''
        fuju.placeholder="请输入留言"
    },
    fztitle(){
           let {dx:{title,imageSrc:[img]}}=this
             title+="(想看更多精彩刺激内容，赶紧下载莱头条)#头条#"
             title=encodeURIComponent(title)
             return title
    },
    fzpic(){
           let {dx:{title,imageSrc:[img]}}=this
            let _img='http://toutiao.longxiaokj.com/1c34015041a7b1667118698422.jpeg'
             img=img||_img
             return encodeURIComponent(img)
    },
     fzurl(){
           let {article_id}=this
           
             return encodeURIComponent('https://static-d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/toutiao/index.html#/article?_id='+article_id)
    },
    fxwx(){
     let url=decodeURIComponent(this.fzurl())         //把他解码
     QRCode.toDataURL(url)
          .then(url => {
            console.log(url)
             })
             .catch(err => {
                 console.error(err)
                 })
    },
    fxqq(){
      let url = this.fzurl()
      let title=this.fztitle()
      let img =this.fzpic()
      window.open(`https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&pics=${img}&site=头条`)
    },
    fxwb(){
        //  console.log(this.article_id)
        //  console.log(this.dx)
        //  let _img='http://toutiao.longxiaokj.com/1c34015041a7b1667118698422.jpeg'
        //  let {dx:{title,imageSrc:[img=_img]}}=this
        //  img=img||_img
        //  title+=location.href+'(想看更多精彩刺激内容，赶紧下载莱头条)#头条#'
        //  title=encodeURIComponent(title)
        //  img=encodeURIComponent(img)
        let title=this.fztitle()
        let img=this.fzpic()
   window.open(`https://service.weibo.com/share/share.php?title=${title}&pic=${img}`)
    },
    fxlj(){
      let input=document.createElement('input')
      input.value=location.href                      //'宓蛭↓娩錗褣偾橡皞平庸'+window.atob(this.article_id)      // 这个是加码        window.btoa 解码
      document.body.appendChild(input)
      input.select();
      document.execCommand('copy')
      this.$toast('复制成功，赶快分享吧！')
      input.remove()
    },
    fxhb(){
       this.$emit('fxhb')
    },
      onSelect(option) {
      console.log(option.name);
      this.showShare = false;
      let ff={
        'wechat':this.fxwx,
        'weibo':this.fxwb, 
        'qq':this.fxqq,
        'link':this.fxlj,
        'poster':this.fxhb
      }
      ff[option.icon].call(this)
    },
  },
};
</script>

<style scoped>
.dw {
  border-top: 2px solid rgb(220, 220, 220);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgb(251, 248, 248);
  margin: 20px 0 0 0;
}
.inp {
  width: 170px;
  border: none;
  border: 1px solid rgb(220, 220, 220);
  border-radius: 20px;
  padding: 7px 0;
  margin: 5px 0;
  text-align: center;
}
.dfl {
  display: flex;
}
.iconfont {
  font-size: 22px !important;
  /* margin: 5px 0 0 0 !important; */
}
.active {
  color: red;
}
.annu{
    margin: 20px 0 0 43px;
}
</style>